<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

	<script  src="/plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="/plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<link rel="stylesheet" href="/plugins/bootstrap-table/dist/bootstrap-table.min.css">

    <script type="text/javascript" src="/plugins/bootstrap-dialog/dist/js/bootstrap-dialog.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap-dialog/dist/css/bootstrap-dialog.min.css">

    
</head>
<body class="hold-transition skin-red sidebar-mini">
<form id="toolbar" class="form-inline">
	<input type="button" value="添加" onclick="addInfo()" class="btn btn-info" >
</form>
<table id="table">

</table>
   <script>
	   function search(){
		   $('#table').bootstrapTable('refresh');
	   }
	   $(function (){
		   InitMainTable();
	   })
	   var $table;
	   //初始化bootstrap-table的内容
	   function InitMainTable () {
		   //记录页面bootstrap-table全局变量$table，方便应用
		   $table = $('#table').bootstrapTable({
			   url: '/brand/listPage',                      //请求后台的URL（*）
			   method: 'post',                      //请求方式（*）
			   dataType:"json",
			   toolbar: '#toolbar',              //工具按钮用哪个容器
			   striped: true,                      //是否显示行间隔色
			   contentType:"application/x-www-form-urlencoded; charset=UTF-8",
			   cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			   pagination: true,                   //是否显示分页（*）
			   sortable: true,                     //是否启用排序
			   sortOrder: "asc",                   //排序方式
			   sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
			   pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
			   pageSize: 5,                     //每页的记录行数（*）
			   pageList: [5,10,25,50],        //可供选择的每页的行数（*）
			   search: false,                      //是否显示表格搜索
			   strictSearch: true,
			   showColumns: true,                  //是否显示所有的列（选择显示的列）
			   showRefresh: true,                  //是否显示刷新按钮
			   // minimumCountColumns: 1,             //最少允许的列数
			   clickToSelect: true,                //是否启用点击选中行
			   //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			   uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
			   showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
			   cardView: false,                    //是否显示详细视图
			   detailView: false,                  //是否显示父子表
			   //得到查询的参数
			   queryParams : function (params) {
				   //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
				   var temp = {
					   // pageSize: params.limit,                         //页面大小
					   // pageNumber: (params.offset / params.limit) + 1,   //页码
				   };
				   return temp;
			   },
			   columns: [{
				   checkbox: true,
				   visible: true                  //是否显示复选框
			   }, {
				   field: 'id',
				   title: 'ID',
				   sortable: true
			   }, {
				   field: 'name',
				   title: '品牌名称',
			   },{
				   field: 'firstChar',
				   title: '品牌首字母',
			   },{
				   field: 'id',
				   title: '操作',
				   align:'center',
				   valign:'middle',
				   formatter:function actionFormatter(value, row, index) {
					   var id = value;
					   var result = "";
					   result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
					   result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

					   return result;
				   }
			   }  ],
			   onLoadSuccess: function () {
			   },
			   onLoadError: function () {
				   showTips("数据加载失败！");
			   },
		   });
	   };
	   //删除单个
	   function DeleteById(id){
		   if (confirm("确定删除吗")){
			   $.ajax({
				   url : "/brand/deleteId",
				   type:"post",
				   dataType: "json",
				   data : {"id" :id},
				   success : function(result){
					   if (result.code == 10000){
						   alert("删除成功");
						   $('#table').bootstrapTable('refresh',{pageNumber:1});
					   }else {
                           alert("删除成功");
					   }

				   },
				   error : function(result){
                       alert("系统问题")
				   }
			   })
		   }
	   };

	   //添加
	   function addInfo(){
		   BootstrapDialog.show({
			   title: '添加',
			   message: $('<div></div>').load('/brand/toAdd'),
			   buttons: [{
				   label: '增加',
				   cssClass:"btn-primary",
				   action: function(dialog) {
					   var $button = this;
					   $button.disable();
					   $button.spin();
					   dialog.setClosable(false);
					   $.ajax({
						   url: "/brand/add",
						   type : "post",
						   dataType : "json",
						   data : $("#addForm").serialize(),
						   async : false,
						   success : function(obj){
							   if (obj.code == 10000){
                                   alert("添加成功");
								   dialog.close();
								   search();
							   }else {
                                   alert("添加失败");
							   }

						   },
						   error : function(obj){
                               alert("系统问题")
						   }
					   })
				   }
			   }, {
				   label: '取消',
				   cssClass:"btn-warning",
				   action: function(dialog) {
					   dialog.close();
				   }
			   }]

		   })
	   }
	   //修改
	   function EditViewById(id) {
		   BootstrapDialog.show({
			   title: '修改',
			   message: $('<div></div>').load('/brand/toUpdate?id='+id),
			   buttons: [{
				   label: '修改',
				   cssClass:"btn-primary",
				   action: function(dialog) {
					   var $button = this;
					   $button.disable();
					   $button.spin();
					   dialog.setClosable(false);
					   $.ajax({
						   url: "/brand/update",
						   type : "post",
						   dataType : "json",
						   data : $("#updateFrom").serialize(),
						   async : false,
						   success : function(obj){
							   if(obj.code == 10000){
                                   alert("修改成功");
								   dialog.close();
								   search();
							   }else {
                                   alert("修改失败");
							   }
						   },
						   error : function(result){
                               alert("系统问题")
						   }
					   })
				   }
			   }, {
				   label: '取消',
				   cssClass:"btn-warning",
				   action: function(dialog) {
					   dialog.close();
				   }
			   }]

		   })
	   }
   </script>
</body>
</html>